<template>
  <div class="bread-nav clearfix">
    <h4 class="menu-name">{{ currentNav }}</h4>
    <p class="nav-info">
      <router-link to="/home" @click.native="getHome">首页</router-link>
      <span>&nbsp;/&nbsp;</span>
      <span v-for="(item,key) in bList" :key=key>
        {{ item }}
        <span v-show="key!==(bList.length-1)">&nbsp;/&nbsp;</span>
      </span>
    </p>
  </div>
</template>

<script>
import $ from 'jquery'

export default {
  name: 'breadNav',
  data () {
    return {
      bList: [],
      currentNav: ''
    }
  },
  methods: {
    getHome () {
      // 点击首页的时候，左侧展开的子菜单关闭
      $('.left .sm').removeClass('open').addClass('not-open')
      $('.bx-icon').removeClass('bx-minus').addClass('bx-plus')
    }
  },
  mounted () {
    if (this.$route.meta !== []) {
      this.bList = this.$route.meta
      this.currentNav = this.$route.meta[this.$route.meta.length - 1]
    }
    console.log('面包屑导航数据，读取当前route的meta属性', this.$route.meta)
  }
}
</script>

<style scope>
.bread-nav {
  height: 36px;
  line-height: 36px;
  background-color: #fff;
  padding: 0 10px;
  box-sizing: border-box;
  margin-bottom: 10px;
  box-shadow: 2px 2px 8px #ccc;
}
.menu-name {
  float: left;
  font-size: 14px;
  color: #717171;
}
.nav-info {
  float: right;
  font-size: 12px;
  color: #8b8b8b;
}
.nav-info a {
  font-size: 12px;
  color: #8b8b8b;
}
</style>
